<template>
<div ref="charts" class="charts"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'index',
  mounted () {
    //初始化charts实例
    let lineCharts = echarts.init(this.$refs.charts)
    lineCharts.setOption({
      //x轴
      xAxis:{
        show:false,//隐藏x轴
        type: 'category'
      },
      //y轴
      yAxis:{
        show:false,
      },
      //系列
      series:[
        {
          type:'line',//折线
          smooth:true,//折线为平滑
          data:[this.getRandom(),this.getRandom(),this.getRandom(),this.getRandom(),this.getRandom(),this.getRandom(),this.getRandom(),this.getRandom(),this.getRandom()],
          //拐点样式设置
          itemStyle:{
            opacity:0,
          },
          //线条的样式
          lineStyle:{
            color:'purple',
          },
          //填充颜色 --渐变色
          areaStyle:{
            color:{
              type:'linear',
              x:0,
              y:0,
              x2:0,
              y2:1,
              colorStops:[
                {
                  offset:0,
                  color:'purple',
                },
                {
                  offset:1,
                  color:'#ffff'
                },
              ],
              global:false,
            }
          },
        }
      ],
      //布局调试
      grid:{
        left:0,
        top:0,
        right:0,
        bottom:0,
      }
    })
  },
  methods:{
    getRandom(){
      return Math.floor(Math.random()*(49)+5)
    }
  }
}
</script>

<style scoped>
.charts{
  width:100%;
  height:100%;
}
</style>
